.su-flex-row {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.su-attachment {
	width: 100%;

	.su-file .su-item {
		.file-icon {
			width: 90upx;
			height: 100upx;
			position: relative;

			.success {
				color: #26BD71;
				line-height: 20upx;
			}

			.error {
				color: #EF4F33;
				line-height: 20upx;
			}

			.before {
				right: 16upx;
				width: 20upx;
				height: 20upx;
				background-color: #fff;
			}
		}
	}

	.su-file .su-up-button {
		width: 100%;

		.font {
			color: $maincolor;
			font-size: 30upx;
		}

		.icon {
			margin-right: 10upx;
		}
	}
}

.su-file .file-content:active {
	background-color: #eee;
}

.su-item>.file-icon>image {
	width: 75upx;
	height: 75upx;
}

.su-item>.file-icon>text {
	position: absolute;
	bottom: 20upx;
	right: 12upx;
	z-index: 99;
	font-size: 30upx;
}

.su-item .file-content {
	display: flex;
	flex-direction: column;
	flex: 1;

	.name {
		max-width: 500upx;
		width: auto;
		line-height: 28upx;
		color: #434343;
		font-size: 28upx;
	}

	.size,
	.progress {
		color: #999999;
		font-size: 24upx;
		line-height: 24upx;
		padding-top: 10upx;
	}

	.progress.error {
		color: $default-red;
	}
}

.su-item .file-operation {
	display: flex;
	align-items: center;

	.delete{
		text-align: center;
		line-height: 48upx;
		height: 50upx;
		width: 50upx;
		border: 1upx solid #e1e1e1;
		border-radius: 50upx;
		.iconfont {
			color: #888888;
			font-size: 30upx;
		}
	}

	.delete:active {
		background-color: #eee;
	}
}

.button-padding {
	padding-top: 20upx;
}

/*图片类型相关*/
.su-images {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;

	.image-item {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 120upx;
		height: 120upx;
		border: 1upx solid #dddddd;
		margin-right: 16upx;
		margin-bottom: 16upx;
		background-color: #f4f4f4;
		text-align: center;
	}

	.image-item .file-image {
		width: 120upx;
		height: 116upx;
	}

	.image-item.upload {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
	}

	.image-item.upload:active {
		background-color: #f9f9f9;
	}

	.image-item.upload .icon {
		font-size: 40upx;
		color: #d1d1d1;
	}

	.image-item .delete {
		color: $default-red;
		position: absolute;
		right: -10upx;
		top: -25upx;
		z-index: 88;
		font-size: 40upx;
	}

	.image-item .delete.before {
		position: absolute;
		right: -0upx;
		top: -0upx;
		width: 20upx;
		height: 20upx;
		background-color: #fff;
		z-index: 77;
	}

	.image-item .progress {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 20upx;
		width: 75upx;
	}

	.image-item .error {
		display: flex;
		flex-direction: column;
		justify-content: center;

		text {
			font-size: 24upx;
			transform: scale(.8);
			color: #c1c1c1;
		}

		.iconfont {
			font-size: 25upx;
			transform: scale(1);
			line-height: 25upx;
		}
	}
}
